API распознавания фигур: изображение стоит тысячи слов, лиц и штрих-кодов

API распознавания фигур распознает лица, штрихкоды и текст на изображениях.

Томас Штайнер

Что такое API распознавания формы?

С API, такими как navigator.mediaDevices.getUserMedia и Chrome for Android photo picker , стало довольно легко захватывать изображения или живые видеоданные с камер устройств или загружать локальные изображения. До сих пор эти динамические данные изображений, а также статические изображения на странице, не были доступны через код, хотя изображения на самом деле могут содержать много интересных функций, таких как лица, штрихкоды и текст.

Например, в прошлом, если разработчики хотели извлечь такие функции на клиенте для создания считывателя QR-кодов , им приходилось полагаться на внешние библиотеки JavaScript. Это могло быть затратно с точки зрения производительности и увеличить общий вес страницы. С другой стороны, операционные системы, включая Android, iOS и macOS, а также аппаратные чипы, обнаруженные в модулях камеры, обычно уже имеют производительные и высокооптимизированные детекторы функций, такие как Android FaceDetector или общий детектор функций iOS, CIDetector .

API обнаружения формы предоставляет эти реализации через набор интерфейсов JavaScript. В настоящее время поддерживаемыми функциями являются обнаружение лиц через интерфейс FaceDetector , обнаружение штрихкодов через интерфейс BarcodeDetector и обнаружение текста (оптическое распознавание символов (OCR)) через интерфейс TextDetector .

Предлагаемые варианты использования

Как указано выше, API распознавания форм в настоящее время поддерживает обнаружение лиц, штрихкодов и текста. Следующий список содержит примеры вариантов использования для всех трех функций.

Распознавание лиц

  • Онлайн-социальные сети или сайты обмена фотографиями обычно позволяют своим пользователям комментировать людей на изображениях. Выделение границ обнаруженных лиц может облегчить эту задачу.
  • Сайты с контентом могут динамически обрезать изображения на основе потенциально обнаруженных лиц, а не полагаться на другие эвристики, или выделять обнаруженные лица с помощью эффектов панорамирования и масштабирования в стиле Кена Бернса в форматах, похожих на истории.
  • Сайты обмена мультимедийными сообщениями могут позволить своим пользователям накладывать забавные объекты, например солнцезащитные очки или усы, на обнаруженные ориентиры лица.

Распознавание штрих-кода

  • Веб-приложения, считывающие QR-коды, могут открывать интересные возможности использования, такие как онлайн-платежи или веб-навигация, или использовать штрихкоды для установления социальных связей в приложениях для обмена сообщениями.
  • Приложения для покупок могут позволить своим пользователям сканировать штрихкоды EAN или UPC товаров в физическом магазине, чтобы сравнивать цены в Интернете.
  • Аэропорты могут установить веб-киоски, где пассажиры могут сканировать ацтекские коды своих посадочных талонов, чтобы увидеть персонализированную информацию, связанную с их рейсами.

Распознавание текста

  • Сайты социальных сетей могут улучшить доступность пользовательского контента изображений, добавляя обнаруженные тексты в качестве атрибутов alt для тегов <img> , когда не предоставлено никаких других описаний.
  • Сайты с контентом могут использовать функцию распознавания текста, чтобы избежать размещения заголовков поверх изображений с содержащимся в них текстом.
  • Веб-приложения могут использовать распознавание текста для перевода текстов, например, меню ресторанов.

Текущий статус

Шаг Статус
1. Создать пояснитель Полный
2. Создать первоначальный проект спецификации Полный
3. Соберите отзывы и доработайте дизайн В ходе выполнения
4. Исходный тест Полный
5. Запуск Распознавание штрих-кода завершено
Распознавание лиц в процессе
Распознавание текста в процессе

Как использовать API обнаружения формы

Если вы хотите поэкспериментировать с API распознавания формы локально, включите флаг #enable-experimental-web-platform-features в about://flags .

Интерфейсы всех трех детекторов, FaceDetector , BarcodeDetector и TextDetector , похожи. Все они предоставляют один асинхронный метод, называемый detect() , который принимает ImageBitmapSource в качестве входных данных (то есть CanvasImageSource , Blob или ImageData ).

Для FaceDetector и BarcodeDetector в конструктор детектора могут передаваться необязательные параметры, которые позволяют предоставлять подсказки базовым детекторам.

Пожалуйста, внимательно ознакомьтесь с матрицей поддержки в пояснительной записке для получения обзора различных платформ.

Работа с BarcodeDetector

BarcodeDetector возвращает необработанные значения штрихкода, которые он находит в ImageBitmapSource и ограничивающих рамках, а также другую информацию, например форматы обнаруженных штрихкодов.

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

Работа с FaceDetector

FaceDetector всегда возвращает ограничивающие рамки лиц, которые он обнаруживает в ImageBitmapSource . В зависимости от платформы может быть доступна дополнительная информация о таких ориентирах лица, как глаза, нос или рот. Важно отметить, что этот API обнаруживает только лица. Он не определяет, кому принадлежит лицо.

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

Работа с TextDetector

TextDetector всегда возвращает ограничивающие рамки обнаруженных текстов, а на некоторых платформах — и распознанные символы.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

Обнаружение особенностей

Простой проверки существования конструкторов для обнаружения API обнаружения формы недостаточно. Наличие интерфейса не говорит вам, поддерживает ли базовая платформа эту функцию. Это работает так, как и задумано . Вот почему мы рекомендуем защитный подход к программированию , выполняя обнаружение функций следующим образом:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

Интерфейс BarcodeDetector был обновлен и теперь включает метод getSupportedFormats() , а аналогичные интерфейсы были предложены для FaceDetector и TextDetector .

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

Это позволяет вам определить необходимую вам функцию, например, сканирование QR-кода:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

Это лучше, чем скрывать интерфейсы, поскольку даже на разных платформах возможности могут различаться, поэтому разработчикам следует проверять именно те возможности (например, определенный формат штрихкода или лицевой ориентир), которые им требуются.

Поддержка операционной системы

Распознавание штрихкода доступно на macOS, ChromeOS и Android. Для Android требуются сервисы Google Play .

Лучшие практики

Все детекторы работают асинхронно, то есть не блокируют основной поток. Поэтому не полагайтесь на обнаружение в реальном времени, а лучше дайте детектору некоторое время, чтобы выполнить свою работу.

Если вы поклонник Web Workers , вы будете рады узнать, что детекторы также представлены там. Результаты обнаружения сериализуемы и, таким образом, могут быть переданы из Worker в основное приложение через postMessage() . Демонстрация показывает это в действии.

Не все реализации платформы поддерживают все функции, поэтому обязательно тщательно проверьте ситуацию с поддержкой и используйте API как прогрессивное улучшение. Например, некоторые платформы могут поддерживать распознавание лиц как таковое, но не распознавание ориентиров лица (глаз, носа, рта и т. д.); или может распознаваться наличие и местоположение текста, но не его содержимое.

Обратная связь

Команда Chrome и сообщество веб-стандартов хотят услышать о вашем опыте работы с API распознавания форм.

Расскажите нам о дизайне API

Есть ли что-то в API, что работает не так, как вы ожидали? Или отсутствуют методы или свойства, которые вам нужны для реализации вашей идеи? Есть вопрос или комментарий по модели безопасности?

Проблемы с реализацией?

Вы нашли ошибку в реализации Chrome? Или реализация отличается от спецификации?

  • Сообщите об ошибке на https://new.crbug.com . Обязательно включите как можно больше подробностей, простые инструкции по воспроизведению и установите для компонентов значение Blink>ImageCapture . Glitch отлично подходит для быстрого и простого распространения результатов воспроизведения.

Планируете использовать API?

Планируете использовать API распознавания форм на своем сайте? Ваша публичная поддержка помогает нам расставлять приоритеты функций и показывает другим поставщикам браузеров, насколько важно их поддерживать.

Полезные ссылки